<template>
	<view class="container">
		<loading :show="loading_show"></loading>
		<refresh-view :loading="refresher_show" :height="naviHeight"></refresh-view>
		<customHead
			@scrollChange="scrollChange" 
			title="退款/售后"
			titlePaddingLeft="30"
			:isShowBackArrow="true"
			navi_background="#fff"
		>
			<!-- <view class="tabs">
				<u-tabs
					:list="list"
					lineWidth="30"
					lineColor="#01cb88"
					@change="selectMenuTap()"
					:activeStyle="{
						color: '#01cb88',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 30rpx; padding-right: 30rpx;padding-top: 10rpx;padding-bottom:10rpx; height: 60rpx;"
				></u-tabs>
			</view> -->
			<view class="head_box box_shadow">
				<view class="label" :class="{alabel: orderActive===item.id}" v-for="(item, index) in list" :key="index"
					@click="selectMenuTap(item.id)">
					<view class="tit" :style="{borderColor: orderActive===item.id? _temp_themeColor:'#fff'}">{{item.name}}</view>
				</view>
			</view>
		</customHead>
		<view class="main_content">
			
			
			<view class="order_list_box">
				<view class="order box_shadow" v-for="(item, index) in orderList" :key="index"
					@click="getDetailsTap(item.id,item.orderType)">
					<view class="head">
						<view  style="display:flex;align-items: center;justify-content: space-between;width: 100%;" >
							<!-- <view style="font-weight: bold;" >
								{{item.businessName}}
							</view> -->
							<view class="" style="color: #f74319;font-weight: bold;" >
								<span v-if="item.orderStatus===0">待付款</span>
								<span v-else-if="item.orderStatus===2">待取货</span>
								<span v-else-if="item.orderStatus===1">已付款</span>
								<span v-else-if="item.orderStatus===3">待收货</span>
								<span v-else-if="item.orderStatus===5">已完成</span>
								<span v-else-if="item.orderStatus===7">已失效</span>
								<span v-else-if="item.orderStatus===8">退款中</span>
								<span v-else-if="item.orderStatus===9">已退款</span>
							</view>
						</view>
					</view>
					<view class="goods_box">
						<view class="goods" v-for="item2 in item.orderItemList" :key="item2.id">
							<view class="left">
								<image v-if="item2.goodsSpecification!==null" :src="item2.goodsSpecification.specificationImages" lazy-load="true" mode="aspectFill"></image>
								<image v-else :src="item2.previewUrl" lazy-load="true" mode="aspectFill"></image>
							</view>
							<view class="right">
								<view class="">
									<view class="title">{{item2.goodName}}</view>
									<view class="goodsSpecification" v-if="item2.goodsSpecification!==null"  >
										
											<view class="text" v-for="(value,key) in JSON.parse(item2.goodsSpecification.specificationName)"
										:key="key" >{{key+':'+value}}</view>
									</view>
								</view>
			
								<view class="box">
									<view class="">
										<view class="" v-if="item2.plugsGoods.goodsType==0" >
											<view class="num" v-if="item2.goodsSpecification!==null" >{{item2.goodsSpecification.dealPrice}}<span>元</span></view>
											<view class="num" v-else >{{item2.goodsPrice}}<span>元</span></view>
										</view>
										<view class="" v-else-if="item2.plugsGoods.goodsType==1" >
											<view class="num" v-if="item2.goodsSpecification!==null" >{{item2.goodsSpecification.dealPrice}}<span>积分</span></view>
											<view class="num" v-else >{{item2.goodsPrice}}<span>积分</span></view>
										</view>
									</view>
									<view class="buy">x{{item2.goodsNum}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="foot">
						<view class="">
							<view v-if="item.orderItemList[0].plugsGoods.goodsType==0" class="left">实际支付：<span :style="{color: '#F54319'}">{{item.payMoney}}元</span></view>
							<view v-else class="left">实际支付：<span :style="{color: '#F54319'}">{{item.payMoney}}积分</span></view>
						</view>
						
						<view class="right">
							<view v-if="item.orderStatus==0 && item.orderExpireRemainTime>0" 
								:style="{backgroundColor: '#F54319', borderColor: '#F54319', color: '#fff'}" class="button"
								@click.stop="selectPay(index,item.orderItemList[0].plugsGoods.goodsType)">
								<span>立即支付</span>
								<u-count-down :time="item.orderExpireRemainTime*1000" format="mm:ss"></u-count-down>
							</view>
							<view v-else class="button"
								@click.stop="getOrderDel(item.id,index)">删除订单</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="!orderList.length">
				<u-empty
					text="暂无订单信息"
					mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
				>
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		searchUserOrderListByStatus,
		partnerAppletsWechatOrderPay,
		integralOrderPay,
		delOrder,
	} from "@/tools/request/api.js"
	export default {
		data() {
			return {
				list: [
					// {
					// 	name: '全部',
					// 	id: -1
					// },
					{
						name: '待处理',
						id: 8
					},
					{
						name: '已处理',
						id: 9
					},
				],
				paypalShow: false,
				userData: '',
				top: 0,
				paypalOrder: '',
				payList: '',
				orderActive: 8,
				orderPage: {
					page: 1,
					size: 5,
					total: 0,
					hasNextPage: false
				},
				orderList: [],
				integral:0,
				loading_show: false
			};
		},
		onLoad(e) {
			let self = this;
			if (e.id) {
				let id = Number(e.id);
				self.orderActive = id;
			}
			self.getInfo();
		},
		methods: {
			specNameText(data) {
				if (data) {
					let list = Object.keys(data);
					let str = '';
					list.forEach((itm, idx) => {
						str += `${data[itm]}${(idx+1)===list.length?'':','}`
					})
					return str
				}
			},
			getInfo() {
				this.balanceMoney = this.userInfo.balance;
				this.integral = this.userInfo.integral;
			},
			totalCountDown(time) {
				let date = new Date().getTime();
				return time - date;
			},
			// selectMenuTap(item) {
			// 	this.orderActive = item.id;
			// 	this.orderPage.page = 1;
			// 	this.orderList = [];
			// 	this.getOrderList(true);
			// },
			selectMenuTap(id) {
				let self = this;
				self.orderActive = id;
				self.orderPage.page = 1;
				self.orderList = [];
				self.getOrderList();
			},
			getOrderList(clear) {
				this.loading_show = true;
				let postData = {	
					startPage: this.orderPage.page,
					size: this.orderPage.size,
					commentState: -1,
					orderStatus: this.orderActive
				}
				searchUserOrderListByStatus(postData).then(res => {
					if (res.code === 200) {
						let datas = res.body;
						this.loading_show = false;
						this.orderPage.total = res.body.pages;
						this.orderPage.hasNextPage = res.body.hasNextPage;
						let data = res.body.list;
						if (clear) {
							this.orderList = data;
						} else {
							this.orderList = this.orderList.concat(data);
						}
						this.orderList.forEach(item=>{
							this.businessList.forEach(item2=>{
								if(item.businessId==item2.businessId){
									item.businessName=item2.businessName
								}
							})
						})
					}
				})
			},
			getorderDetail() {
				let self = this;
		
			},
			selectPay(i,type){
				if(type==0){
					this.getPaypalOrder(i)
				}else{
					this.scorePay(i)
				}
			},
			getPaypalOrder(i) {
				let self = this;
				let postData = {
					 "client": "小程序",
					  "openId": self.openId,
					  "orderId": self.orderList[i].id,
					  "orderNo": self.orderList[i].orderNo,
					  "payMoney": self.orderList[i].payMoney,
					  "payWay":1,
					  "payType":0
				}
				uni.showLoading({
					title: '支付准备中',
					mask: true
				});
				partnerAppletsWechatOrderPay(postData).then(res => {
					if (res.code === 200) {
						self.payList = res.body;
						let data = res.body;
						uni.hideLoading();
						self.time = Date.now();
						wx.requestPayment({
							'appId': self.payList.appid,
							'nonceStr': self.payList.noncestr,
							'package': self.payList.package,
							'signType': 'RSA',
							'timeStamp': self.payList.timestamp,
							'paySign': self.payList.sign,
							success: function(res) {
								this.show = false;
								uni.showToast({
									title: '微信支付成功'
								});
								
								setTimeout(function() {
									uni.navigateTo({
										url: `/pages/order/paysuccess/paysuccess?id=${self.orderList[i].id}&&money=${self.orderList[i].payMoney}`
									});
								}, 600);
							},
							fail: function(err) {
								uni.showModal({
									title: '支付失败',
									content: '订单支付失败，请重新进行支付。如对订单金额有疑问请联系客服人员',
									showCancel: false
								})
								return
							}
						});
					} else {
						uni.hideLoading();
						uni.showModal({
							title: '支付失败',
							content: res.msg,
							showCancel: false
						})
					}
				})
			},
			// 积分支付
			scorePay(i){
				let self=this;
				if(self.integral< self.orderList[i].payMoney || self.integral==null){
					uni.showModal({
						title: '提示',
						content: '积分不足',
						success: function (res) {
							if (res.confirm) {
								// uni.navigateTo({
								// 	url:'/pages/index/pointsmall'
								// })
							} else if (res.cancel) {
							}
						}
					});
					return
				}
				
				let postdata={
					"client": "小程序",
					"extParm": "",
					"openId": self.openId,
					"orderId": self.orderList[i].id,
					"orderNo": self.orderList[i].orderNo,
					"payMoney": self.orderList[i].payMoney,
					"payType": 0,
					"payWay":3,
					"businessId":self.businessId
				}
				uni.showLoading({
					title: '支付准备中',
					mask: true
				});
				integralOrderPay(postdata).then(res=>{
					if(res.code==200){
						uni.hideLoading();
						uni.showToast({
							title: '积分支付成功'
						});
						setTimeout(function() {
							let id = JSON.parse(JSON.stringify(self.orderInfo.id));
							uni.redirectTo({
								url: `/pages/subPack/paysuccess?id=${self.orderInfo.id}&&money=${self.orderList[i].payMoney}&&score=1`
							});
						}, 600);
					}else{
						uni.hideLoading();
						uni.showToast({
							title: res.msg
						});
					}
				})
			},
			getOrderDel(id, index) {
				let self = this;
				let postData = {ids: id.toString()};
				uni.showModal({
					title: '订单删除确认',
					content: '订单删除后不可恢复，是否继续删除？',
					success(ces) {
						if (ces.confirm) {
							// let id = self.orderList[index].id;
							uni.showLoading({
								title: '准备删除中',
								mask: true
							});
							delOrder(postData).then(res => {
								if (res.code === 200) {
									uni.hideLoading();
									uni.showToast({
										title: '订单删除成功'
									});
									self.orderList.splice(index, 1);
								} else {
									uni.hideLoading();
									uni.showModal({
										title: '订单删除失败',
										content: res.msg,
										showCancel: false
									})
								}
							})
						}
					}
				})
			},
			confirmOrder(id) {
				let self = this;
				uni.showLoading({
					title: '确认收货中',
					mask: true
				});
				self.Get(self.Url.orderConfirm, {
					id: id
				}).then(res => {
					if (res.code === 0) {
						uni.hideLoading();
						uni.showToast({
							title: '确认收货成功'
						});
						self.orderPage.page = 1;
						self.orderList = [];
						self.getOrderList();
					} else {
						uni.hideLoading();
						uni.showModal({
							title: '确认收货失败',
							content: res.msg,
							showCancel: false
						})
					}
				});
			},
			getDetailsTap(ids,i) {
				uni.navigateTo({
					url: `/pages/order/orderDetail/orderDetail?id=${ids}&ordertype=${i}&integral=${this.integral}`
				})
			}
		},
		onShow() {
			let self = this;
			self.orderPage.page = 1;
			self.orderList = [];
			self.getOrderList(true);
		},
		onReachBottom() {
			let self = this;
			if (this.hasNextPage) {
				self.orderPage.page++;
				self.getOrderList();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		
		.head_box {
				display: flex;
				align-items: center;
				height: 120rpx;
				background-color: #fff;
				position: sticky;
				top: 0;
				left: 0;
				z-index: 100;
				border-bottom: 3rpx solid #f5f5f5;
				.label {
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
		
					.tit {
						color: #666;
						transition: all 0.2s;
						padding-top: 6rpx;
						border-bottom: 3px solid transparent;
						padding-bottom: 10rpx;
						font-size: 30rpx;
					}
				}
		
				.alabel {
					.tit {
						color: #1c1c1c;
						font-weight: bold;
						border-color: #00d389;
					}
				}
			}
		
		.tabs{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.main_content{
			width: 100%;
			display: flex;
			flex-direction: column;
			
			.order_list_box {
				width: 100%;
		
				.order {
					width: 100%;
					margin: 0 auto;
					border-radius: 20rpx;
					background-color: #fff;
					margin-bottom: 30rpx;
					border-bottom: 3rpx solid #f5f5f5;
					.head {
						display: flex;
						align-items: center;
						width: 92%;
						margin: 0 auto;
						height: 80rpx;
						justify-content: space-between;
		
						.left {
							color: #999;
							font-size: 28rpx;
							display: flex;
							align-items: center;
		
							span {
								background-color: #F54319;
								color: #fff;
								font-size: 24rpx;
								width: 36rpx;
								height: 36rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 6rpx;
								margin-left: 20rpx;
								line-height: 36rpx;
							}
						}
					}
		
					.goods_box {
						width: 92%;
						margin: 0 auto;
						background-color: #f5f5f5;
						border-radius: 20rpx;
		
						.goods {
							display: flex;
							align-items: center;
							padding: 10rpx 0;
		
							.left {
								width: 190rpx;
								display: flex;
								align-items: center;
								justify-content: center;
		
								image {
									width: 150rpx;
									height: 150rpx;
									box-sizing: border-box;
									border-radius: 20rpx;
									background-color: #fff;
								}
							}
		
							.right {
								flex: 1;
								min-width: 0;
								height: 150rpx;
								display: flex;
								flex-direction: column;
								box-sizing: border-box;
								justify-content: space-between;
								position: relative;
								
								.goodsSpecification {
									position: relative;
									color: #666;
									width: 95%;
									font-size: 26rpx;
									display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
									-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
									-webkit-line-clamp: 2;  //一个块元素显示的文本的行数
									overflow: hidden; //溢出隐藏
									// .text{
										
									// }
									.num {
										position: absolute;
										bottom: -70rpx;
										left: 0;
									}
								}
		
								.title {
									color: #1c1c1c;
									font-weight: bold;
									font-size: 28rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									width: 95%;
									
								}
		
		
								.box {
									display: flex;
									align-items: center;
									justify-content: space-between;
									width: 95%;
									padding-bottom: 10rpx;
		
									.num {
										color: #1c1c1c;
										font-size: 30rpx;
										display: flex;
										align-items: center;
		
										span {
											font-size: 26rpx;
											padding-left: 2rpx;
										}
									}
		
									.buy {
										color: #1c1c1c;
										padding: 0 10rpx;
										border-radius: 10rpx;
									}
								}
							}
						}
					}
		
					.foot {
						width: 92%;
						margin: 0 auto;
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 100rpx;
		
						.left {
							color: #1c1c1c;
							font-size: 28rpx;
		
							span {
								font-weight: bold;
								color: #f14b5b;
							}
						}
		
						.right {
							flex: 1;
							display: flex;
							justify-content: flex-end;
		
							.button {
								border: 1px solid #e5e5e5;
								color: #666;
								font-size: 28rpx;
								padding: 0 20rpx;
								border-radius: 100rpx;
								line-height: 28rpx;
								display: flex;
								align-items: center;
								height: 50rpx;
								position: relative;
		
								button {
									position: absolute;
									width: 100%;
									height: 100%;
									top: 0;
									left: 0;
									opacity: 0;
								}
		
								/deep/.u-count-down__text {
									font-size: 28rpx;
									color: #fff;
									padding-left: 4rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
